<template>
  <div>
    <Card style="max-width:800px">
    <p slot="title">基础信息</p>
    <a href="#" slot="extra" @click.prevent="changePwd">
            <Icon type="ios-loop-strong"></Icon>
            设置密码
        </a>
    <Form ref="formValidate" :model="formValidate" :label-width="80">
        <FormItem label="名称:" prop="username">
            {{formValidate.username}}
        </FormItem>
        <FormItem label="年纪:" prop="age">
            {{formValidate.age}}
        </FormItem>
        <FormItem label="手机号:" prop="phone">
            {{formValidate.phone}}
        </FormItem>
        <FormItem label="性别:" prop="sex">
            {{formValidate.sex?sexMap[formValidate.sex]:'无'}}
        </FormItem>
    </Form>
  </Card>
    <Modal
        v-model="showModel"
        title="设置密码">
        <Form ref="pwdFrom" :model="pwdFrom" :label-width="100">
          <input hidden="true"/>
          <FormItem label="原密码:" prop="oldPwd" :rules="[{
                required: true,
                message: '请输入原密码',
                trigger: 'blur'
            }]">
              <Input v-model="pwdFrom.oldPwd" type="password" placeholder="输入初始密码" />
          </FormItem>
          <FormItem label="新密码:" prop="newPwd" :rules="[{
                required: true,
                message: '请输入新密码',
                trigger: 'blur'
            }]">
              <Input v-model="pwdFrom.newPwd" type="password" placeholder="输入新密码"  />
          </FormItem>
          <FormItem label="再次确认:" prop="reNewPwd" :rules="[{
                required: true,
                message: '请再次输入新密码',
                trigger: 'blur'
            }]">
              <Input v-model="pwdFrom.reNewPwd" type="password" placeholder="再次输入新密码"/>
          </FormItem>
      </Form>
      <div slot="footer">
            <Button type="primary" size="large" @click="handleSubmit('pwdFrom')">确定</Button>
          </div>
    </Modal>
  </div>
</template>
<script>
import { getUserInfo, changePwd } from '@/api/user'
import md5 from 'js-md5'
export default {
  data () {
    return {
      formValidate: {
        age: 1,
        createTime: '',
        id: '',
        phone: '',
        sex: 1,
        username: ''
      },
      pwdFrom: {},
      sexMap: {
        0: '女',
        1: '男'
      },
      showModel: false
    }
  },
  created () {
    getUserInfo().then((res) => {
      this.formValidate = res.data
    })
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.pwdFrom.newPwd !== this.pwdFrom.reNewPwd) {
            this.$Message.error('两次新密码不一致')
            return
          }
          changePwd({
            oldPwd: md5(this.pwdFrom.oldPwd),
            newPwd: md5(this.pwdFrom.newPwd)
          }).then(res => {
            if (res.code === 200) {
              this.showModel = false
              this.$Message.success(res.data)
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    changePwd () {
      this.showModel = true
      this.pwdFrom = {
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      }
    }
  }
}
</script>
